<template lang="pug">
  div(v-if="isPacKetShow")
    transition(name="left", v-if="red_packet")
      .packet-handler-base(v-if="isShow",@click="toggleClick()")
        img.avatar(:src="red_packet.pic")
        .text {{red_packet.desc}}
        img.icon(:src="packetIcon")
    red-packet(ref="red_packet", :packet="red_packet")
</template>

<script>
import packetIcon from '../assets/packet/red_packet_icon.png'
import RedPacket from './RedPacket'
import Window from '../helpers/window'

export default {
  name: 'PacketHandler',
  components: {
    RedPacket
  },
  data () {
    return {
      packetIcon: packetIcon,
      isShow: true,
      red_packet: null
    }
  },
  methods: {
    toggleClick () {
      this.$refs.red_packet.open()
      this.isShow = false
    },
    getPacket () {
      this.$http.get('/proxy/api/red_envlopes').then((res) => {
        this.red_packet = res.data
      })
    }
  },
  created () {
    this.getPacket()
  },
  computed: {
    isPacKetShow () {
      return Window.isWechat()
    }
  }
}
</script>

<style lang="sass">
@import '../styles/color.sass';
.packet-handler-base
  position: fixed
  top: 70%
  left: 0
  width: 60%
  height: 40px
  background: $yellow-bg
  border-radius: 6px
  overflow: hidden
  z-index: 100
  display: flex
  flex-direction: row
  justify-content: space-between
  align-items: center
  padding: 5px
  img.avatar
    height: 30px
    width: 30px
    border-radius: 50%
  .text
    padding: 0px 5px
    flex: 1 1
    color: $white
    font-size: .8em
  img.icon
    height: 25px
  
</style>
